<template>
  <div :class="['PPzixuPanel']">

    <div class="view">
      <router-view >

      </router-view>
    </div>

  </div>
</template>


<style scoped>
.PPzixuPanel{
 position: relative;width: 100%;background-color: #F6F8E3;
}

.view{
  position: relative;max-width: 1500px;min-width:1200px;margin: auto;
}


</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";
import {useRoute, useRouter} from "vue-router";
let store = useStore();
let router = useRouter();
let routerData = useRoute();
onMounted(() => {
 // console.log("PPzixuPanel onMounted 品牌咨询一级页面 初始化",window.location.href,routerData.query,routerData.query.id);
  console.log("PPzixuPanel onMounted 品牌咨询一级页面 初始化");
  store.state.channelId=Enum.cId_6;
  if(routerData.query.id==null){
    store.state.pinpZxRouterData.url=Enum.zixu_list;
  }else{
    store.state.pinpZxRouterData.url=Enum.zixu_details;
    store.state.pinpZxRouterData.data=routerData.query;
  }

  store.state.pinpZxRouterData.status++;
  getSrsData();
});


onBeforeUnmount(() => {
  console.log('PPzixuPanel onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("PPzixuPanel onUnmounted 卸载组件实例后  ");
});

let pagesState=computed(()=>{return store.state.pinpZxRouterData.status;});
watch(pagesState,(newValue,oldValue)=>{
  console.log("PPzixuPanel watch  pagesState ");
  router.push({ path:store.state.pinpZxRouterData.url, query: store.state.pinpZxRouterData.data});
});

let getSrsData=()=>{
  if(store.state.pinpZXData.length===0){
    $.ajax({
      url: store.state.data_url+'api/getChannelListById',
      type: 'GET',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"channelId":Enum.cId_6},
      success: function(data) {
        //console.log("PPzixuPanel getChannelListById ",data);
        store.state.pinpZXData=(data.content.list[0].levelList.length>0?data.content.list[0].levelList[0].dataList:data.content.list[0].datalist[0].dataList);
        console.log("PPzixuPanel getChannelListById 品牌咨询",store.state.pinpZXData);

      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });
  }
}


</script>

